import { useRoutes, Navigate } from "react-router-dom";
import Power from "./power";
import ContractRoute from "../routes/ContractManagement/Contract.js";
import DataRoute from "../routes/DataManagement/Data.js";
import WorkRoute from "../routes/work/Work.js";
import SystemRoute from "../routes/SystemSettings/System.js";
import StatisticRoute from "../routes/Statistics/Statistic.js";
import ServiceRoute from "../routes/ServiceManagement/Service.js";
import ResidentRoute from "../routes/ResidentManagement/Resident.js";
import MessageRoute from "../routes/MessageManagement/Message.js";

// 懒加载
import { lazy, Suspense } from "react";
const Login = lazy(() => import("../pages/Login/Login"));
const Main = lazy(() => import("../pages/index"));
const Erro = lazy(() => import("../routes/Erro"));
const Work = lazy(() => import("../pages/work/Work"));
const Contract = lazy(() => import("../pages/ContractManagement/Contract"));
const Data = lazy(() => import("../pages/DataManagement/Data"));
const Message = lazy(() => import("../pages/MessageManagement/Message"));
const Resident = lazy(() => import("../pages/ResidentManagement/Resident"));
const Service = lazy(() => import("../pages/ServiceManagement/Service"));
const Statistic = lazy(() => import("../pages/Statistics/Statistic"));
const System = lazy(() => import("../pages/SystemSettings/System"));

function Router() {
  let router = [
    {
      path: "/",
      element: <Navigate to="/login"></Navigate>,
    },
    {
      path: "/login",
      element: (
        <Suspense fallback={<div>稍等</div>}>
          <Login />
        </Suspense>
      ),
    },
    {
      path: "/main",
      element: (
        <Suspense fallback={<div>稍等</div>}>
          <Main></Main>
        </Suspense>
      ),
      children: [
        {
          index: "index",
          element: <Power ele={<Work></Work>} path={"/work"}></Power>,
        },
        {
          path: "work",
          element: <Power ele={<Work></Work>} path={"/work"}></Power>,
        },
        {
          path: "contract",
          element: (
            <Power ele={<Contract></Contract>} path={"/contract"}></Power>
          ),
        },
        {
          path: "data",
          element: <Power ele={<Data></Data>} path={"/data"}></Power>,
        },
        {
          path: "message",
          element: <Power ele={<Message></Message>} path={"/message"}></Power>,
        },
        {
          path: "resident",
          element: (
            <Power ele={<Resident></Resident>} path={"/resident"}></Power>
          ),
        },
        {
          path: "service",
          element: <Power ele={<Service></Service>} path={"/service"}></Power>,
        },
        {
          path: "statistics",
          element: (
            <Power ele={<Statistic></Statistic>} path={"/statistics"}></Power>
          ),
        },
        {
          path: "system",
          element: <Power ele={<System></System>} path={"/system"}></Power>,
        },
        ...WorkRoute,
        ...ContractRoute,
        ...DataRoute,
        ...MessageRoute,
        ...ResidentRoute,
        ...StatisticRoute,
        ...ServiceRoute,
        ...SystemRoute,
      ],
    },
    {
      path: "*",
      element: (
        <Suspense fallback={<div>稍等</div>}>
          <Erro></Erro>
        </Suspense>
      ),
    },
  ];
  return useRoutes([...router]);
}
export default Router;
